<template>
  <div
    class="video-integration"
    v-loading="saveUploading.status"
    :element-loading-text="saveUploading.txt"
    v-loading.fullscreen.lock="saveUploading.full"
  >
    <div
      id="newInteDom"
      class="pointMark_video"
    >
      <!-- <video
        id="videoIntePlayer"
        ref="videoIntePlayer"
        class="video-js vjs-big-play-centered"
        width="100%"
        height="100%"
        oncontextmenu="return false;"
        disablePictureInPicture
        controlslist="nodownload"
      ></video> -->
      <dplayer
        key="dplayer"
        ref="dplayer"
        :playParam.sync="playerOptions"
      >
      </dplayer>
    </div>

    <div class="fragment">
      <p class="tipcd">裁剪视频</p>
      <div class="fragment_cont">
        <ul class="clear box fl">
          <template v-for="(item, inx) of fixVideoList">
            <li
              class="fragment_ls fl"
              @click="switchPlayurl(inx)"
              :key="inx"
              :class="activeInx === inx ? 'active-video-box' : ''"
            >
              <!-- <li
                            :class="draggable && sortIdx === inx ? 'fragment_ls fl drop-li' : 'fragment_ls fl'"
                            :key="inx"
                            :draggable="draggable"
                            @click="switchPlayurl(inx)"
                            @dragstart.stop="dragStart($event, inx)"
                            @drop.stop="dropList($event, inx)"
                            @dragover.stop.prevent="dragover($event)"
                            @dragend.stop="draggable=false"
                            @mousedown.stop="draggable=true"> -->
              <img
                :src="item.thumbnail"
                alt=""
              />
              <!-- <div v-if="inx > 0"   style="text-align: right"> -->
              <div
                v-if="item.isDelete !== false"
                style="text-align: right"
              >
                <label
                  class="el-upload-list__item-status-label"
                  @click="deleteOtherVideo(inx)"
                >
                  <transition name="el-fade-in-linear">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </transition>
                  <transition name="el-fade-in-linear">
                    <i class="el-icon-close"></i>
                  </transition>
                </label>
              </div>
            </li>
          </template>
          <li
            class="fragmentUp box fl"
            @click="uploadMode = true"
          >
            <i class="el-icon-picture-outline"></i>
            <p>点击上传</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="videoIntegration_table">
      <p class="tipcd">截取时长</p>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="85px"
        class="demo-ruleForm"
      >
        <div class="videoIntegration_tm clear">
          <el-form-item
            label="开始时间"
            prop="startTime"
          >
            <span>
              <el-time-picker
                v-model="ruleForm.startTime"
                value-format="HH:mm:ss"
                :clearable="false"
                :editable="false"
                :picker-options="{
                  format: 'HH:mm:ss',
                  selectableRange: '00:00:00-' + timeMax,
                }"
                placeholder="任意时间点"
              >
              </el-time-picker>
            </span>
            <i
              class="el-icon-location"
              @click="getVideoPlayTime(1)"
            ></i>
          </el-form-item>
          <!--  -->
          <el-form-item
            label="结束时间"
            prop="endTime"
          >
            <span>
              <el-time-picker
                v-model="ruleForm.endTime"
                value-format="HH:mm:ss"
                :clearable="false"
                :editable="false"
                :picker-options="{
                  format: 'HH:mm:ss',
                  selectableRange: ruleForm.startTime + '-' + timeMax,
                }"
                placeholder="任意时间点"
              >
              </el-time-picker>
            </span>
            <i
              class="el-icon-location"
              @click="getVideoPlayTime(2)"
            ></i>
          </el-form-item>
          <!--  -->
          <el-form-item
            label="截取时长"
            prop="len"
          >
            <span
              class="t_length"
              v-model="ruleForm.len"
            >
              {{ ruleForm.len }}
            </span>
          </el-form-item>
        </div>

        <el-form-item
          class="buttonCSS videoIntegration_btn"
          label-width="0"
        >
          <!-- <el-button type="primary" :disabled="ruleForm.endTime > ruleForm.startTime" @click="videoView('ruleForm')">预览片段</el-button> -->
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
          >确定截取</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="publishFrom_table off-cut">
      <template>
        <el-table
          border
          ref="singleTable"
          :data="fixVideoList"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
          >
          </el-table-column>
          <el-table-column
            property="name"
            label="文件名称"
            align="center"
            width="380"
          >
          </el-table-column>
          <el-table-column
            property="timerate_show"
            align="center"
            label="最终视频中的时间"
            width="219"
          >
          </el-table-column>
          <el-table-column
            property="times"
            width="150"
            align="center"
            label="截取时长"
          >
          </el-table-column>
        </el-table>
      </template>
      <el-button
        type="primary"
        class="buttonCSS"
        @click="saveInteVideo()"
      >保存</el-button>
    </div>

    <el-dialog
      title="上传方式"
      :visible.sync="uploadMode"
      width="660px"
      custom-class="uploadMode"
      :before-close="clearUpload"
      :close-on-click-modal="false"
    >
      <div class="videoIntegration_xz clear">
        <div>
          <p>本地视频</p>
          <upload-video-dom
            :uploadOptions="uploadOptions"
            @videoListen="getVideo"
            ref="uploaderVideoBox"
          >
          </upload-video-dom>
        </div>
        <div @click="getListBox()">
          <p>关联视频</p>
          <div style="
              width: 280px;
              height: 160px;
              border: 1px solid #ddd;
              border-radius: 4px;
              background: #f0f4fd;
              overflow: hidden;
            ">
            <img src="/static/image/video.png" />
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 选择资源 -->
    <el-dialog
      title="选择资源"
      :visible.sync="selectResourceView"
      width="800px"
      custom-class="alBox"
      :close-on-click-modal="false"
    >
      <div class="releaseTK">
        <div class="releaseTK_h clear">
          <div class="resourceSearch fl">
            <el-input
              placeholder="视频名，教师名"
              v-model="listParam.keyword"
              class="input-with-select"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchFunc"
              ></el-button>
            </el-input>
          </div>
        </div>
        <!--  -->
        <div
          class="resourceData"
          v-loading="loading.status"
          :element-loading-text="loading.txt"
        >
          <template>
            <el-table
              border
              ref="multipleTable"
              highlight-current-row
              @cell-click="selectVideo"
              :data="listData"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column
                prop="video_name"
                label="视频名称"
                width="250"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="category"
                label="视频分类"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="type_name"
                label="视频信息"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="create_time"
                label="上传时间"
                align="center"
                width="180"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
          </template>
          <div
            class="table-pagination"
            v-if="total_number > 10"
          >
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="listParam.page_index"
              :page-sizes="[10, 20, 30, 40, 50, 100]"
              :page-size="listParam.page_size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total_number"
            >
            </el-pagination>
            <div class="pagination-button">
              <el-button
                @click="getList"
                type="primary"
                icon="el-icon-refresh"
                circle
                title="刷新数据"
                size="mini"
              >
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer releaseTK_btn buttonCSS"
      >
        <el-button
          type="primary"
          @click="selectResourceView = false"
          plain
        >取 消</el-button>
        <el-button
          type="primary"
          @click="comfirmVideo"
        >确 定</el-button>
      </div>
    </el-dialog>

    <transition name="el-fade-in-linear">
      <div
        class="masking"
        :class="{ activeLive: isActive }"
      >
        <div class="maskingBox">
          <div class="masking_h">
            <span>预览片段</span>
            <i
              class="el-icon-close"
              @click="viewClose"
            ></i>
          </div>
          <div class="masking_c">
            <videoSomeTime
              v-if="showVideoPlayer"
              :playParam.sync="playParam"
            ></videoSomeTime>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// import 'videojs-flash'
// import SWF_URL from 'videojs-swf/dist/video-js.swf';
import uploadVideoDom from "@/components/common/uploader-video";
import videoSomeTime from "./../../../public/videoSomeTimeView";
import dplayer from "@/components/public/dplayer.vue";
export default {
  props: ["compParam", "activeIndex"],
  name: "",
  data() {
    return {
      playParam: { play_url: "", start_time: null, end_time: null },
      showVideoPlayer: false,
      isActive: true,
      activeInx: 0,
      player: null, // 播放器
      thisIndex: "7",
      loading: {
        status: false,
        txt: "获取数据...",
      },
      saveUploading: {
        status: false,
        txt: "正在保存...",
        full: false,
      },
      listData: [],
      listParam: {
        keyword: "",
        type: -1,
        page_index: 1,
        page_size: 10,
      },
      total_number: 0,
      tempVideo: null,
      uploadOptions: {
        target: this.BASE_URL + "/api/video/video_inte_upload",
        testChunks: false,
        headers: { Authorization: `Bearer ` + this.$g.access_token },
      },
      selectFileOrNot: false, //是否选中文件
      uploadOrNot: false, //是否已经上传
      attrs: {
        accept: ["video/*"],
      },
      timeMax: "00:00:00",
      currentPage4: 4,
      ruleForm: {
        opInx: 0,
        endTime: "00:00:00", //结束时间
        startTime: "00:00:00", //开始时间
        len: "00:00:00",
      },
      rules: {
        startTime: [
          { required: true, message: "请输入开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请输入结束时间", trigger: "blur" },
        ],
      },
      // playerOptions : {
      //     loop: false,
      //     height: '360',
      //     sources: [{
      //         type: "rtmp/mp4",
      //         src: "blabla"
      //     }],
      //     techOrder: ['flash'],
      //     flash: {swf: SWF_URL },
      //     autoplay: false,
      //     controls: true,
      //     poster: "",
      // 	controlBar: {
      //       	timeDivider: true,
      //      	durationDisplay: true,
      //      	remainingTimeDisplay: false,
      //       	fullscreenToggle: true  //全屏按钮
      //     }
      // },
      // playerOptions: {
      //   loop: false, // true -- 视频一结束就重新开始
      //   controls: true,
      //   fluid: false,
      //   autoplay: false, // true--浏览器准备好时开始回放
      //   height: "360",
      //   poster: "", // 封面地址
      //   language: "zh-CN",
      //   // techOrder: ['flash'],
      //   sources: [
      //     {
      //       // type: "video/mp4",
      //       type: "application/x-mpegURL",
      //       src: this.compParam.play_url, // 视频播放路径
      //     },
      //   ],
      //   controlBar: {
      //     children: [
      //       { name: "playToggle" }, // 播放按钮
      //       { name: "currentTimeDisplay" }, // 当前已播放时间
      //       { name: "progressControl" }, // 播放进度条
      //       { name: "durationDisplay" }, // 总时间
      //       {
      //         name: "volumePanel", // 音量控制
      //         inline: false, // 不使用水平方式
      //       },
      //       { name: "FullscreenToggle" }, // 全屏
      //     ],
      //   },
      // },

      playerOptions: {
        play_url: this.compParam.play_url,
      },
      uploadMode: false,
      selectResourceFile: false, //选择视频
      selectResourceView: false, //选择资源
      resourceList2: [], //选择资源--data
      resourceType2: "", //选择资源-资源类型--val
      typeOptions: [], //资源类型
      resourceSearch2: "", //选择视频--搜索
      resourceType3: "",
      fixVideoList: [],
      inteTotalTimes: 0,
      draggable: false,
      sortIdx: "",
      dragInx: null, // 拖动元素的下标
    };
  },
  mounted() {
    // this.initPlay();
    this.initFunc();
  },
  beforeDestroy() {
    this.player && this.player.dispose();
  },
  components: {
    uploadVideoDom,
    videoSomeTime,
    dplayer,
  },
  methods: {
    /**
     * 元素被拖动
     */
    dragStart(e, inx) {
      e.dataTransfer.setData("drag", "drag");
      this.sortIdx = inx;
      this.dragInx = inx;
    },
    /**
     * 放置被拖数据
     */
    dropList(e, inx) {
      let obj = this.fixVideoList[this.sortIdx];
      this.fixVideoList.splice(this.sortIdx, 1);
      this.fixVideoList.splice(inx, 0, obj);
      this.ruleForm.opInx = inx === this.ruleForm.opInx ? this.dragInx : inx;
      this.calTimerateShow();
    },
    /**
     * 何处放置被拖动的数据
     */
    dragover(e) {},
    /**
     * 关闭弹窗，清空上传
     */
    clearUpload() {
      this.uploadMode = false;
      this.$refs.uploaderVideoBox.reset();
    },
    /**
     * 播放器初始
     */
    initPlay() {
      let self = this;
      this.player && this.player.dispose();
      let videoIntePlayer = document.getElementById("newInteDom");
      videoIntePlayer.innerHTML = `<video id="videoIntePlayer"
        class="video-js vjs-big-play-centered"
        width="100%" height="100%"
        oncontextmenu="return false;"
        disablePictureInPicture controlslist="nodownload">
        </video>`;
      this.player = this.$videojs(
        "videoIntePlayer",
        this.playerOptions,
        function onPlayerReady() {}
      );

      // 初始音量50%
      this.player.volume(0.5);

      this.player.on("play", function () {
        self.onPlayerPlay();
      });
    },
    initFunc() {
      console.log(this.compParam, 222);
      this.resolveFixVideoList();
      this.timeMax = this.compParam.length;
    },
    resolveFixVideoList() {
      if (this.fixVideoList.length === 0) {
        this.fixVideoList.push({
          isDelete: false,
          id: this.compParam.id,
          name: this.compParam.name,
          path: this.compParam.path,
          play_url: this.compParam.integratingUrl,
          thumbnail: this.compParam.thumbnail,
          timerate: "00:00:00-00:00:00",
          timerate_show: "00:00:00-00:00:00",
          times: "00:00:00",
          length: this.compParam.length,
        });
      }
    },
    saveInteVideo() {
      // if (this.inteTotalTimes > 3600) {
      //   this.$message.warning("整合的视频时长不能超过60分钟");
      //   return false;
      // }
      let yes = (res) => {
        this.saveVideo();
      };
      let cancel = (res) => {};
      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "视频合成所需时间根据视频大小而定，在合成期间视频将不能播放以及无法编辑，确定合成吗？",
      });
    },
    saveVideo() {
      this.saveUploading.status = true;
      this.saveUploading.full = true;
      let success = (data) => {
        this.saveUploading.status = false;
        this.saveUploading.full = false;
        this.$message.success(data.msg);
        this.$emit("changeIndexx");

        setTimeout(() => {
          this.$router.push("/resources/video/video-list");
        }, 1000);
      };
      let fail = (data) => {
        this.saveUploading.status = false;
        this.saveUploading.full = false;
        this.$message.error(data.msg);
      };

      this.$ajax.post(
        "api/video/video_inte",
        { id: this.compParam.id, inte_data: this.fixVideoList },
        { func: { success: success, fail: fail } }
      );
    },
    /**
     * 播放器重新赋值视频地址
     */
    switchPlayurl(inx) {
      if (!is_empty(this.fixVideoList[inx])) {
        let url = this.fixVideoList[inx].play_url;
        this.playParam.play_url = url
        this.$nextTick(() => {
          this.$refs.dplayer.playParam.play_url = url
          this.$refs.dplayer.initDPlayer()
        })
        this.activeInx = inx;
        this.timeMax = this.fixVideoList[inx].length;
        // this.player.src({ type: "video/mp4", src: url });
        // this.player.load();
        // this.player.paused() && this.player.play();
        this.ruleForm = {
          opInx: inx,
          endTime: "00:00:00",
          startTime: "00:00:00",
          len: "00:00:00",
        };
      }

    },
    comfirmVideo() {
      if (is_empty(this.tempVideo)) {
        this.$message.warning("请选择一个视频");
        return false;
      }
      if (
        getOneColumn(this.fixVideoList, "id").indexOf(this.tempVideo.id) > -1
      ) {
        this.$message.warning("视频已经在列表中");
        return false;
      }
      let success = (data) => {
        this.uploadMode = false;
        this.selectResourceView = false;
        this.fixVideoList.push({
          id: this.tempVideo.id,
          name: this.tempVideo.video_name,
          path: this.tempVideo.path,
          play_url: this.BASE_URL + "/" + this.tempVideo.path,
          thumbnail: this.tempVideo.source_url + this.tempVideo.picture,
          timerate: "00:00:00-00:00:00",
          timerate_show: "00:00:00-00:00:00",
          times: "00:00:00",
          length: this.tempVideo.length,
        });
        this.switchPlayurl(this.fixVideoList.length - 1);
      };
      let fail = (data) => {
        this.$message.warning(data.msg);
      };
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/video/check_view", {
        params: { id: this.tempVideo.id },
        func: { success: success, fail: fail },
      });
    },
    deleteOtherVideo(inx) {
      this.activeInx = 0;
      this.fixVideoList.splice(inx, 1);
      this.switchPlayurl(0);
    },
    selectVideo(row, column, cell, event) {
      this.tempVideo = row;
      this.$refs.multipleTable.setCurrentRow(row);
    },
    getListBox() {
      this.getList();
      this.selectResourceView = true;
    },
    getList() {
      this.tempVideo = null;
      this.loading.status = true;
      let success = (data) => {
        this.loading.status = false;
        this.listData = data.data.data;
        this.total_number = data.data.data_sum;
      };
      let fail = (data) => {
        this.loading.status = false;
        this.$message.error(data.msg);
      };
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/video/video_list", {
        params: this.listParam,
        func: { success: success, fail: fail },
      });
    },
    /**
     * 搜索列表
     */
    searchFunc() {
      this.listParam.page_index = 1;
      this.getList();
    },
    getVideoPlayTime(type = 1) {
      this.$forceUpdate();
      let nowTime = formatSeconds(this.$refs.dplayer.getCurrentPlayTime());
      if (type === 1) {
        this.ruleForm.startTime =
          nowTime.hour + ":" + nowTime.minute + ":" + nowTime.second;
      } else {
        this.ruleForm.endTime =
          nowTime.hour + ":" + nowTime.minute + ":" + nowTime.second;
      }
    },
    fileUpload() {
      this.$refs.uploader.uploader.upload();
    },
    //分页
    handleSizeChange(val) {
      this.listParam.page_index = 1;
      this.listParam.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParam.page_index = val;
      this.getList();
    },
    //表格
    handleClick(row) {},
    //视频
    // listen event
    onPlayerPlay() {
      this.debounce(() => {
        var normal_currentTime = this.player.currentTime();
        var unnormal_currentTime = this.player.currentTime();
        if (normal_currentTime.toString() == unnormal_currentTime.toString()) {
          this.player.pause();
          this.player.play();
        }
      }, 100);
    },
    /**
     * 延迟处理
     */
    debounce(func, wait, immediate) {
      let timeout, args, context, timestamp, result;
      const later = function () {
        // 据上一次触发时间间隔
        const last = +new Date() - timestamp;

        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
        if (last < wait && last > 0) {
          timeout = setTimeout(later, wait - last);
        } else {
          timeout = null;
          // 如果设定为immediate===true，因为开始已经调用过了此处无需调用
          if (!immediate) {
            result = func.apply(context, args);
            if (!timeout) context = args = null;
          }
        }
      };
      return function (...args) {
        context = this;
        timestamp = +new Date();
        const callNow = immediate && !timeout;
        // 如果延时不存在，重新设定延时
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
          result = func.apply(context, args);
          context = args = null;
        }

        return result;
      };
    },
    onPlayerPause(player) {},
    // player is ready
    playerReadied(player) {
      // you can use it to do something...
      // player.[methods]
    },

    handleSelect(key, keyPath) {},
    //表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm.startTime)
          var newTime = this.ruleForm.startTime.split(":");
          var total_time_num =
            parseInt(newTime[0]) * 3600 +
            parseInt(newTime[1]) * 60 +
            parseInt(newTime[2]);
          // console.log(total_time_num)
          var newTime2 = this.ruleForm.endTime.split(":");
          var total_time_num2 =
            parseInt(newTime2[0]) * 3600 +
            parseInt(newTime2[1]) * 60 +
            parseInt(newTime2[2]);
          // console.log(total_time_num2)
          var diff_time = formatSeconds(total_time_num2 - total_time_num);
          // console.log(diff_time)
          if (total_time_num2 <= total_time_num) {
            this.$message({
              message: "结束时间不可小于等于开始时间",
              type: "warning",
            });

            return;
          }

          this.fixVideoList[this.ruleForm.opInx].timerate =
            this.ruleForm.startTime + "-" + this.ruleForm.endTime;

          this.fixVideoList[this.ruleForm.opInx].times =
            diff_time.hour + ":" + diff_time.minute + ":" + diff_time.second;
          this.ruleForm.len =
            diff_time.hour + ":" + diff_time.minute + ":" + diff_time.second;
          this.calTimerateShow();
        } else {
          return false;
        }
      });
    },
    //计算最终视频中的时长 TODO
    calTimerateShow() {
      this.inteTotalTimes = 0;
      for (var i = 0; i < this.fixVideoList.length; i++) {
        if (i === 0) {
          this.fixVideoList[i].timerate_show =
            "00:00:00-" + this.fixVideoList[i].times;
        } else {
          //上个结束时间
          var lastEndtime =
            this.fixVideoList[i - 1].timerate_show.split("-")[1];

          //上个结束时间剪切
          var lastEndtimeF = lastEndtime.split(":");
          //当前开始时间秒数
          var thisStartSecond =
            parseInt(lastEndtimeF[0]) * 3600 +
            parseInt(lastEndtimeF[1]) * 60 +
            parseInt(lastEndtimeF[2]) +
            1;

          var timeSecondF = this.fixVideoList[i].times.split(":");
          var timeEndSecond =
            parseInt(timeSecondF[0]) * 3600 +
            parseInt(timeSecondF[1]) * 60 +
            parseInt(timeSecondF[2]) +
            thisStartSecond;
          this.fixVideoList[i].timerate_show =
            formatSecondsToHour(thisStartSecond) +
            "-" +
            formatSecondsToHour(timeEndSecond);
        }
        var nowTimesss = this.fixVideoList[i].times.split(":");
        var nowTimes =
          parseInt(nowTimesss[0]) * 3600 +
          parseInt(nowTimesss[1]) * 60 +
          parseInt(nowTimesss[2]);
        this.inteTotalTimes += nowTimes;
      }
    },
    /**
     * 关于预览片段
     */
    viewClose() {
      this.showVideoPlayer = false;
      this.isActive = true;
    },
    /**
     * 预览片段
     */
    videoView(obj) {
      let time = this.ruleForm.startTime;
      let hour = time.split(":")[0];
      let min = time.split(":")[1];
      let sec = time.split(":")[2];
      let s = Number(hour * 3600) + Number(min * 60) + Number(sec);
      let time1 = this.ruleForm.endTime;
      let hour1 = time1.split(":")[0];
      let min1 = time1.split(":")[1];
      let sec1 = time1.split(":")[2];
      let s1 = Number(hour1 * 3600) + Number(min1 * 60) + Number(sec1);

      this.playParam.play_url = this.fixVideoList[this.activeInx].play_url;
      this.playParam.start_time = s;
      this.playParam.end_time = s1;
      this.isActive = false;
      this.showVideoPlayer = true;
    },
    //选择试题--input-- checked
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getVideo(mess) {
      this.uploadMode = false;
      if (mess) {
        this.fixVideoList.push({
          name: mess.file_name,
          play_url: mess.play_url,
          path: mess.file_path,
          thumbnail: mess.thumbnail,
          timerate: "00:00:00-00:00:00",
          timerate_show: "00:00:00-00:00:00",
          times: "00:00:00",
          length: mess.length,
        });

        this.switchPlayurl(this.fixVideoList.length - 1);
      }
      this.$refs.uploaderVideoBox.reset();
    },
  },
};
</script>

<style lang="scss">
.video-integration {
  .releaseTK_h,
  .resourceData {
    margin-bottom: 20px;
  }
  #newInteDom {
    height: 400px;
  }

  .vjs-modal-dialog-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }

  .drop-li {
    border: 1px solid #66b1ff;
  }

  .active-video-box {
    box-shadow: 0px 0px 2px 1px #409eff;
  }

  .activeLive {
    opacity: 0;
    visibility: hidden;
  }

  .masking {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    background: rgba(0, 0, 0, 0.3);
    z-index: 4;

    .maskingBox {
      position: absolute;
      top: 20%;
      left: 50%;
      width: 800px;
      margin-left: -400px;
      background: #fff;
    }

    .masking_h {
      padding: 10px 15px;
      background: #348efc;
      text-align: center;
      text-align-last: justify;

      > span,
      > i {
        font-size: 16px;
        text-align-last: initial;
        display: inline-block;
        vertical-align: middle;
        color: #fff;
      }

      > i {
        cursor: pointer;
      }
    }

    .masking_c {
      padding: 30px;
    }
  }
}

.videoIntegration_table {
  margin-bottom: 30px;

  .el-form {
    background: #f1f6fb;
    padding: 20px 0;
  }

  .buttonCSS {
    margin-bottom: 0;
  }

  .el-icon-location {
    padding: 7px;
  }
}

.videoIntegration_btn {
  text-align: left;
  padding: 0 20px;
}

.fragment_cont {
  // height: 92px;
  padding: 10px 0;
  overflow: hidden;
  background: #f1f6fb;
  overflow-y: auto;
}

.fragment {
  margin: 30px 0 20px;
}

.fragment_ls {
  width: 160px;
  height: 90px;
  border: 1px solid #ddd;
  position: relative;
  margin: 0 0 10px 10px;
  overflow: hidden;

  > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  > div {
    // position: absolute;
    // top: 0;
    // left: 0;
    // width: 100%;
    // height: 100%;
    // background: rgba(0,0,0,.12);
    // text-align: center;
    // visibility: hidden;
    // opacity: 0;

    // >i{
    // 	margin-top: 30px;
    // 	font-size: 28px;
    // 	color:#fff;
    // 	cursor: pointer;
    // }

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .el-upload-list__item-status-label {
      display: block;
      position: absolute;
      right: -17px;
      top: -7px;
      width: 46px;
      height: 26px;
      background: #13ce66;
      text-align: center;
      transform: rotate(45deg);
      box-shadow: 0 1px 1px #ccc;

      .el-icon-check {
        font-size: 12px;
        margin-top: 12px;
        color: #fff;
        transform: rotate(-45deg);
        font-family: "element-icons" !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
      }

      .el-icon-check:before {
        content: "\E6DA";
      }

      .el-icon-close {
        display: none;
      }
    }
  }

  &:hover {
    // >div{
    // 	visibility: visible;
    // 	opacity: 1;
    // }
    > div {
      .el-upload-list__item-status-label {
        top: -5px;
        right: -15px;
        background: #f56c6c;
        box-shadow: none;
        cursor: pointer;

        .el-icon-check {
          display: none;
        }

        .el-icon-close {
          position: absolute;
          transform: rotate(-45deg);
          top: 10px;
          color: #fff;
          right: 14px;
          font-family: "element-icons" !important;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }

        .el-icon-close:before {
          content: "\E6DB";
        }
      }
    }
  }
}

.fragmentUp {
  text-align: center;
  width: 160px;
  height: 90px;
  border: 1px solid #ddd;
  margin-left: 10px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;

  > p {
    line-height: 20px;
    margin-top: 5px;
    color: #888;
  }

  > i {
    margin-top: 20px;
    font-size: 30px;
    color: #409eff;
  }
}

.videoIntegration_xz {
  text-align: center;
  text-align-last: justify;
  padding: 0 0 50px;

  > div {
    display: inline-block;
    vertical-align: top;
    text-align-last: initial;
    // width: 205px;
    // height: 180px;
    // background: #F0F4FD;
    cursor: pointer;

    > i {
      margin: 40px 0;
    }

    > p {
      font-size: 14px;
      font-weight: bold;
      color: #666;
    }
  }
}

.uploadMode-btn {
  padding-bottom: 40px;
}

.off-cut {
  .el-table {
    margin-bottom: 20px;
  }
}
</style>
